<template>
   <div class="city_container">
		<head-top :head-title="cityname" go-back='true'>
         <router-link to="/home" slot="changecity" class="change_city">切换城市</router-link>    
      </head-top>
      <form class="city_form" v-on:submit.prevent>
         <div>
            <!-- required 属性规定必需在提交之前填写输入字段 -->
            <input type="search" name="city" placeholder="输入学校、商务楼、地址" class="city_input input_style" required v-model="inputValue">
         </div>
         <div>
            <input type="submit" name="submit" class="city_submit input_style" @click='postpois' value="提交">
         </div>
      </form>
      <header v-if="historytitle" class="pois_search_history">搜索历史</header>
      <ul class="getpois_ul">
         <li v-for="(item, index) in placelist" @click='nextpage(index,item.geohash)' :key="index">
            <h4 class="pois_name ellipsis">{{item.name}}</h4>
            <p class="pois_address allipsis">{{item.address}}</p>
         </li>
      </ul>
      <footer v-if="historytitle&&placelist.length" class="clear_all_history" @click="clearAll">清空所有</footer>
      <div class="search_none_place" v-if="placeNone">很抱歉！无搜索结果</div>
   </div>
</template>

<script>
   import headTop from '../../components/header/head';
   import { getStore, setStore, removeStore } from '../../config/mUtils';
   //  获取当前所在城市
   import { currentcity, searchplace } from '../../service/getData'
   export default {
      components: { headTop },
	   data () {
	   return {
         inputValue: '',         // 搜索地址
         cityid: '',             // 当前城市id
         cityname: '',           // 当前城市名字
         placelist: [],          // 搜索城市列表
         placeHistory: [],       // 历史搜索记录
         historytitle: true,     // 默认显示搜索历史头部，点击搜索后隐藏
         placeNone: false,       // 搜索无结果 显示提示
	   }
   },
   mounted(){
      this.cityid = this.$route.params.cityid;
      // 获取当前城市的名字
      currentcity(this.cityid).then(res=>{
         this.cityname = res.name;
      });
      this.initData();
   },
   methods:{
      initData(){       // 获取搜索历史记录
         if(getStore('placeHistory')){
            this.placelist = JSON.parse(getStore('placeHistory'));
         }else{
            this.placelist = [];
         }
      },
      postpois(){          // 发送搜索信息 inputValue
            if(this.inputValue){          // 输入值不为空
               searchplace(this.cityid, this.inputValue).then(res => {
                  this.historytitle = false;
                  this.placelist = res;
                  this.placeNone = res.length ? false : true;
            })
         }
      },
      // 搜索进入下个页面时进行判断
      nextpage(index, geohash){
         let history = getStore('placeHistory');
         let choosePlace = this.placelist[index];
         if(history){
            let checkrepeat = false;
            this.placeHistory  = JSON.parse(history);
            // 遍历历史记录的元素的geohash 和当前的goehash 还是否一致 
            this.placeHistory.forEach(item => {
               if(item.geohash == geohash){
                  checkrepeat = true;
               }
            })
            if(!checkrepeat){
               this.placeHistory.push(choosePlace)
            }
         }else{
            this.placeHistory.push(choosePlace)
         }
         // 把历史记录存储本地
         setStore('placeHistory', this.placeHistory);
         // 带上geohash 跳转到 msite 页面请求数据
         this.$router.push({path: '/msite', query: {geohash}})
      },
      clearAll(){
         removeStore('placeHistory');
      }
   }
 }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';
    .city_container{
        padding-top: 2.35rem;
    }
    .change_city{
        right: 0.4rem;
        @include sc(0.6rem, #fff);
        @include ct;
    }
    .city_form{
        background-color: #fff;
        border-top: 1px solid $bc;
        border-bottom: 1px solid $bc;
        padding-top: 0.4rem;
        div{
            width: 90%;
            margin: 0 auto;
            text-align: center;
            .input_style{
                border-radius: 0.1rem;
                margin-bottom: 0.4rem;
                @include wh(100%, 1.4rem);
            }
            .city_input{
                border: 1px solid $bc;
                padding: 0 0.3rem;
                @include sc(0.65rem, #333);
            }
            .city_submit{
                background-color: $blue;
                @include sc(0.65rem, #fff);
            }
        }
    }
    .pois_search_history{
        border-top: 1px solid $bc;
        border-bottom: 1px solid $bc;
        padding-left: 0.5rem;
        @include font(0.475rem, 0.8rem);
    }
    .getpois_ul{
        background-color: #fff;
        border-top: 1px solid $bc;
        li{
            margin: 0 auto;
            padding-top: 0.65rem;
            border-bottom: 1px solid $bc;
            .pois_name{
                margin: 0 auto 0.35rem;
                width: 90%;
               @include sc(0.65rem, #333);
            }
            .pois_address{
                width: 90%;
                margin: 0 auto 0.55rem;
                @include sc(0.45rem, #999);
            }
        }
    }
    .search_none_place{
        margin: 0 auto;
        @include font(0.65rem, 1.75rem);
        color: #333;
        background-color: #fff;
        text-indent: 0.5rem;
    }
    .clear_all_history{
        @include sc(0.7rem, #666);
        text-align: center;
        line-height: 2rem;
        background-color: #fff;
    }
</style>
